<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme" style="min-width: 1100px;">
    <div class="fixed left-0 top-0 flex items-center px-16 h-screen justify-center w-full">
      <div class="flex flex-wrap max-w-lg mb-10">
        <div class="font-bold text-4xl mb-2 w-full text-center ">欢迎使用</div>
        <div class="text-sm mb-6 w-full text-center">Welcome</div>

        <n-input v-model:value="logname" type="text" size="large" placeholder="请输入账号" />
        <n-input v-model:value="password" class="mt-3" type="password" size="large" placeholder="请输入密码" @keyup.enter="confirm" />
        <n-input v-if="type === 'REGISTER'" v-model:value="confirmPassword" type="password" class="mt-3"
                 size="large" placeholder="请再次输入密码"
        />
        <n-input v-if="type === 'REGISTER'" v-model:value="name" class="mt-3" size="large" placeholder="请输入真实姓名" />
        <div class="text-sm mt-7 w-full flex justify-between cursor-pointer hover:underline">
          <div v-if="type === 'LOGIN'" @click="type = 'REGISTER'">没有账号？点此注册</div>
          <div v-else @click="type = 'LOGIN'">返回登录</div>
        </div>
        <n-button class="mt-3 w-full" type="primary" size="large" @click="confirm">
          {{ type === 'LOGIN' ? '立即登录' : '马上注册' }}
        </n-button>
        <n-button class="mt-3 w-full" size="large" tertiary @click="wechatLogin">
          微信登录
        </n-button>
      </div>
    </div>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NInput, NConfigProvider, NButton } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { reqLogin } from './user.def'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'

const logname = ref('')
// const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const name = ref('')
const type = ref<'LOGIN' | 'REGISTER'>('LOGIN')


async function confirm() {
  if (!logname.value || !password.value) {
    actErr('请输入登录名和密码')
    return
  }

  const res = await reqLogin(axiosReq,logname.value, password.value)
  console.log(res)

  if(res.code === '1') {
    actErr(res.message)
    return
  } else if(res.code === '0') {
    nav('/display/inTime')
  }

}

function wechatLogin() {
  actErr('暂未开放')
}

</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
